function code_draw() {
    var canvas_width = $('#canvas').width();
    var canvas_height = $('#canvas').height();
    var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
    var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; //取值范围
    var aCode = sCode.split(",");
    var aLength = aCode.length; //获取到数组的长度
    var value = [];
    for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        value[i] = txt.toLowerCase();
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = code_randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
    }
    // 将生成的值以属性的方法添加到元素
    value = value.join("");
    $('#canvas').attr('data-code', value)
    //验证码上显示线条
    for (var i = 0; i <= 5; i++) {
        context.strokeStyle = code_randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    //验证码上显示小点
    for (var i = 0; i <= 30; i++) {
        context.strokeStyle = code_randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
}

function code_randomColor() { //得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}



$(function () {
    code_draw();
    // 点击后刷新验证码
    $("#canvas").on('click', function () {
        code_draw();
    })

    $(".btn").on('click', function () {
        // 将输入的内容转为大写，可通过这步进行大小写验证
        var val = $(".input-val").val().toLowerCase();
        // 获取生成验证码值
        var num = $('#canvas').attr('data-code');

        var a = $('.youxiang').val().length;

        var b = $('.mima').val().length;

        var c = $('.input-val').val().length;
        if (a == 0) {
            $('.tijiao').text('请输入用户名');
            console.log(1);
            $('.youxiang').css({ borderColor: 'red' })
            return;

        }
        console.log(a);
        console.log(b);
        if (a != 0 && b == 0) {
            $('.tijiao').text('请输入密码');
            $('.mima').css({ borderColor: 'red' })
            return;

        }
        if (a != 0 && b != 0 && c == 0) {
            $('.tijiao').text('请输入验证码');
            $('.youxiang').css({ borderColor: 'red' });
            $('.input-val').css({ borderColor: 'red' })
        }
        if (val == '') {
            alert('请输入验证码！');
            $('.youxiang').css({ borderColor: '#ccc' })
        } else if (val == num) {
            alert('提交成功！');
            $(".input-val").val('');
            // code_draw(show_num);
            $('.youxiang').val('');
            $('.mima').val('');
            $('input-val').css({ borderColor: '#ccc' })

        } else {
            alert('验证码错误！请重新输入！');
            $(".input-val").val('');
            // code_draw(show_num);
            $('.tijiao').text(' ');
        }
    })
})
$('.youxiang').click(function () {
    $('.tijiao').text(' ');
})
$('.static-form input').on('input', function () {
    $(this).css({ borderColor: '#ccc' })
})


// 账号登录框  
// #logo_deng
var Number_one = ' 卫来 高志远 林天明 徐文博 张凯旋   李连贤 张家正 赵琦龙       ';
$('#button').on('click', function () {
    Number_one += 'YYDS~~~~~~~~~~简艳超独家赞助'
    $('#text').val(Number_one)
})

// 计数
var cont = 2
// 扫码登录
$('.qpouan').on('click', function () {
    $('#logo_deng').css({ display: 'none', })
    $('#logo-box').css({ display: 'block', })

    $('.wei').removeClass('icon-erweima')
    $('.wei').addClass('icon-shenfenzhenghao')
    $('.wei').css({
        fontSize: 51,
        top: -13,
        left: -11,
    })

    cont++
    if (cont % 2 == 0) {
        $('#logo_deng').css({ display: 'block', })
        $('#logo-box').css({ display: 'none', })
        $('.wei').removeClass('icon-shenfenzhenghao')
        $('.wei').addClass('icon-erweima')

        $('.wei').css({
            fontSize: 60,
            top: -18,
            left: -4,
        })
    }
})
$('.mima').click(function () {
    console.log(3);
    $('.mimi').addClass('icon-24gf-lock2')
    $('.mimi').removeClass('icon-24gl-lock2')
})

